<template>
  <div class="container" @click="coloseimg">
    <div class="wrapper">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="item in swiperList" :key="item.id">
          <img class="gallary-img" :src="item.imgUrl" />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      swiperList: [
        {
          id: "0001",
          imgUrl:
            "https://imgs.qunarzz.com/p/tts0/1510/a7/ba6e110ae8b548f7.jpg_r_390x260x95_3d51173f.jpg",
        },
        {
          id: "0002",
          imgUrl:
            "https://imgs.qunarzz.com/p/tts1/1605/ca/207d953d4a9dbef7.jpg_r_390x260x95_80c49e27.jpg",
        },
        {
          id: "0003",
          imgUrl:
            "https://imgs.qunarzz.com/vs_ceph_b2c_001/59725dab-51e6-4ce2-be36-4ce9a0dfc310.jpg_r_390x260x95_98e4be3d.jpg",
        },
      ],
      // 设置轮播图
      swiperOption: {
        pagination: ".swiper-pagination",
        paginationType: "fraction",
        observeParents: true,
        // 发生变化自动刷新
        observer: true,
        loop: true,
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    coloseimg() {
      this.$emit("close", false);
    },
  },
};
</script>

<style lang='stylus' scoped>
.wrapper >>> .swiper-container {
  overflow: inherit;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 99;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;

  .wrapper {
    background: #fff;
    width: 100%;

    .gallary-img {
      width: 100%;
    }

    .swiper-pagination {
      color: white;
      bottom: -1rem;
    }
  }
}
</style>
